<template>
  <div style="background-color: yellow;padding: 10px 20px;height: 6vh;">
    <span style="font-size: 20px;line-height: 60px" >商品列表</span>
    <el-button type="primary"  style="float: right;margin-top: 10px" @click="addProduct">添加商品</el-button>
  </div>
<!--  商品弹窗-->
  <el-dialog v-model="dialogVisible" :before-close="cancel" :title="dialogTitle" style="width: 1000px;">
    <el-form label-position="top" label-width="60px">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="商品名称">
            <el-input v-model="product.goodsName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产地">
            <el-input v-model="product.origin" placeholder="请输入商品产地"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产地类型">
            <el-select  placeholder="选择产地类型" v-model="product.typeOrigin"  >
              <el-option label="国产" value="国产"></el-option>
              <el-option label="进口" value="进口"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="生产日期">
            <el-date-picker v-model="product.productionDate" type="date" placeholder="选择日期" ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保质天数">
            <el-select placeholder="选择天数" v-model="product.warrantyPeriod">
              <el-option label="7天" value="7"></el-option>
              <el-option label="15天" value="15"></el-option>
              <el-option label="30天" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品类别">
            <el-select v-model="product.goodsType" placeholder="选择商品归属类型">
              <el-option v-for="item in goodsTypeList" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品品级">
            <el-select v-model="product.goodsGrad" placeholder="选择商品级">
                            <el-option v-for="item in goodsGradList"  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
<!--          <el-form-item label="商品图片">-->
<!--            <el-upload-->
<!--                v-model:file-list="fileList"-->
<!--                v-model:action="actionUrl"-->
<!--                name="file"-->
<!--                limit="1"-->
<!--                list-type="picture-card"-->
<!--                :on-preview="handlePictureCardPreview"-->
<!--                :on-remove="handleRemove"-->
<!--            >-->
<!--              <el-icon>-->
<!--                <Plus/>-->
<!--              </el-icon>-->
<!--            </el-upload>-->
<!--            <el-dialog v-model="dialogVisible">-->
<!--              <img w-full :src="dialogImageUrl"/>-->
<!--            </el-dialog>-->
<!--          </el-form-item>-->

        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格">
            <el-input type="textarea" v-model="product.specification" placeholder="请输入商品规格"></el-input>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="product.comments" placeholder="请输入商品描述"></el-input>
          </el-form-item>
        </el-col>

      </el-row>

<!--      仓储信息-->
      <el-row style="background-color: yellow;width: 100%; line-height: 40px;font-size: 25px;font-weight: bold; padding: 5px">
        <el-span >商品仓储信息</el-span>

      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" >
          <el-form-item label="店铺名称">
            <el-input placeholder="请输入店铺名称" v-model="shopName"  disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="储藏方式">
            <el-radio-group v-model="product.storageMode">
              <el-radio border label="常温" value="0"></el-radio>
              <el-radio border label="冷藏" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品价格 （¥ 00.00）">
            <el-input placeholder="请输入价格" v-model="product.price" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="">
        <el-col :span="8">
          <el-form-item label="商品销量">
            <el-input  v-model="product.sales"  disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品库存">
            <el-input placeholder="请输入商品库存" v-model="product.storage" ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品销售单位">
            <el-select placeholder="选择商品销售单位" v-model="product.sales_unit">
              <el-option v-for="item in salesUnitList" :label="item.label" :value="item.value"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>

    </template>

  </el-dialog>
<!--  商品信息弹窗结束-->
<!--查询商品卡片-->
  <el-card style="margin: 20px;height: 70px;background-color: #42b983">
    <el-form :inline="true">
      <el-form-item label="商品名称" style="width: 290px">
        <el-input v-model="productSearchForm.name" placeholder="请输入商品名称"></el-input>
      </el-form-item >

      <el-form-item label="商品产地类型" style="width: 290px">
        <el-select  placeholder="选择产地类型" v-model="productSearchForm.typeOrigin"  >
          <el-option label="国产" value="国产"></el-option>
          <el-option label="进口" value="进口"></el-option>
          <el-option label="全选" value=""></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品品级" style="width: 290px">
        <el-select v-model="productSearchForm.goodsGrad" placeholder="选择商品级">
          <el-option v-for="item in goodsGradList"  :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadproduct">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--  商品列表卡片-->
  <el-card style="margin: 20px">
    <el-table  stripe  :data="productList">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
      <el-table-column label="价格" prop="price" align="center" ></el-table-column>
      <el-table-column label="等级" prop="goodsGrad" align="center" :formatter="goodsGradFormatter" ></el-table-column>

      <el-table-column label="存储量" prop="storage" align="center"></el-table-column>

      <el-table-column label="销量" prop="sales" align="center"></el-table-column>
      <el-table-column label="产地类型" prop="typeOrigin" align="center"></el-table-column>


      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editProduct(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deleteStorage(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>

  </el-card>






</template>
<script setup>

import {onMounted, ref} from "vue";
import axios   from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
// 弹窗是否显示变量,弹窗名字
const  dialogVisible = ref(false);
const dialogTitle = ref("添加商品");
// 定义对象，保存弹窗数据
const product = ref({
  id:"",
  goodsName:"",
  origin:'',
  typeOrigin:'',
  goodsType:'',
  goodsGrad:'',
  imgUrl:'',
  productionDate:'',
  warrantyPeriod:'',
  specification:'',
  comments:'',


  shopId: '2001',//shop.value.id,
  storageMode:'',
  price:'',
  sales:'',
  storage:'',
  sales_unit:''


})
// 定义对象保存商品存储信息
// const storage = ref({
//
//   goodsId:"",
//   shopId:"2001",
//   storageMode:'',
//   price:'',
//   sales:'',
//   storage:'',
//   sales_unit:''
// });
// 定义对象保存商品信息
const productInfo = ref({
  name:"",
  origin:"",
  productionDate:"",
  warrantyPeriod:"",
  goodsType:"",
  goodsGrad:"",
  specification:"",
  comments:""
})



// 添加商品方法
const addProduct = ()=>{
  dialogVisible.value = true;
  dialogTitle.value="添加商品";
};

const save = ()=>{

  let data=qs.stringify(product.value)
  console.log("对象是：",data);
  axios.post(BASE_URL+'/v1/product/save',data)

      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('商品添加成功！');
          dialogVisible.value = false;
          product.value = {};

          loadproduct();
        }else {


        }
      })
}

// 取消保存
const cancel = ()=>{
  if (confirm("您确认关闭该窗口吗？")){
  dialogVisible.value = false;
  product.value = {
    id: "",
    goodsName: "",
    origin: '',
    typeOrigin: '',
    goodsType: '',
    goodsGrad: '',
    imgUrl: '',
    productionDate: '',
    warrantyPeriod: '',
    specification: '',
    comments: '',


    shopId: shop.value.id,
    storageMode: '',
    price: '',
    sales: '',
    storage: '',
    sales_unit: ''

  }


  }
}



// 显示商店名称
const shopName = ref("1号店");



// onMounted(()=>{
//   loadDictOption(goodsTypeList, 'goods_type');
//
// });




/**图片上传相关代码开始**/
// const fileList = ref([]);
// const dialogImageUrl = ref('');
// const dialogVisible = ref(false);
// //定义变量用来保存图片上传给哪个后端接口地址
// // const actionUrl = ref(BASE_URL + '/v1/file/upload');
// //移除图片
// // const handleRemove = (uploadFile, uploadFiles) => {
//   console.log(uploadFile, uploadFiles);
//   //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
//   let imgUrl = uploadFile.response.data;
//   //2.给后端发请求,删除图片
//   axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
//       .then((response)=>{
//         if (response.data.code==2000){
//           ElMessage.success('删除成功!');
//         }
//       })
// }
// //图片上传后预览
// const handlePictureCardPreview = (uploadFile) => {
//   dialogImageUrl.value = uploadFile.url
//   dialogVisible.value = true;
//   console.log(uploadFile);
//   //console.log(fileList.value[0].response.data);
// }
/**图片上传相关代码结束**/


// 定义查询条件对象
const productSearchForm=ref({
  name:"",
  typeOrigin:"",
  goodsGrad:"",
  shopId: '2001',//shop.value.id,

});

// 定义数组保存查询结果
const productList = ref([]);

// 定义方法加载商品
const  loadproduct=()=>{
  let data=qs.stringify(productSearchForm.value);
  console.log('查询参数：'+data)
  axios.get(BASE_URL+'/v1/product/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          productList.value=response.data.data;
          // productSearchForm.value={};
        }else{
          ElMessage.error(response.data.msg);
        }
      })

};

// 定义数组，保存商品类型
const goodsTypeList = ref([]);
// 定义数组保存商品等级
const goodsGradList = ref([]);
// 定义数组保存销售单位信息
const  salesUnitList=ref([]);
onMounted(()=>{
  loadDictOption(goodsTypeList,'product_type');
  loadDictOption(goodsGradList,'goods_grad');
  loadDictOption(salesUnitList,'sales_unit')

})
// 进入页面加载商品
onMounted(()=>{
  loadproduct();



});



const goodsGradFormatter = (row,column,cellValue,index)=> {
  if (!goodsGradList.value) {
    console.log("消息1")
    return cellValue;
  }
  for (let item of goodsGradList.value) {
    if (item.value == cellValue) {
      console.log("消息3")
      cellValue = item.label;
    }
  }
  return cellValue;
}

// 重置查询方法
const resetSearch=()=>{
  productSearchForm.value={
    name:"",
    typeOrigin:"",
    goodsGrad:"",
    shopId:'2001',//shop.value.id,
  };
  loadproduct();
}

//编辑商品

// 删除商品
const deleteStorage = (id) =>{
  if (confirm('确定删除此商品吗？')){
    // let shopId=user.value.shopId;
    // console.log('店铺ID',shopId)
    let data=qs.stringify({
        shopId : '2001',//shop.value.id,
        goodsId : id
     }
    );
    console.log('删除商品参数',data)
    axios.post(BASE_URL+'/v1/product/delete',data)
        .then((response)=>{
          if (response.data.code == 2000){
            ElMessage.success('删除商品成功!');
            loadproduct();
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }

};

// 编辑商品
const editProduct=(id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑商品';
  axios.get(BASE_URL+'/v1/product/select?id='+id)
      .then((response)=>{
        if (response.data.code == 2000){
          product.value = response.data.data[0];


        }else {
          ElMessage.error(response.data.msg);
        }
      })
};



//获取当前登录的店铺的数据
// const shop = ref(getLoginShop());

</script>


<style scoped>

</style>